<template>
  <div>
    <el-divider>选项</el-divider>
    <div style="text-align: center; margin-bottom: 16px">
      <el-radio-group v-model="config.mode" size="mini" @change="handleDataTypeChange">
        <el-radio-button label="0">接口</el-radio-button>
        <el-radio-button label="1">数据源</el-radio-button>
      </el-radio-group>
    </div>

    <el-form-item v-if="config.mode == 0" label="接口">
      <l-layer-select
        v-model="config.dataCode"
        labelKey="f_Name"
        valueKey="f_Id"
        :columns="apiColumns"
        @change="handleApiChange"
        :loadPageData="loadPageData"
      ></l-layer-select>
    </el-form-item>

    <el-form-item v-if="config.mode == 1" label="数据源">
      <l-select
        v-model="config.dataCode"
        placeholder="请选择数据源"
        size="mini"
        :options="lr_dataSource"
        labelKey="f_Name"
        valueKey="f_Code"
        filterable
        @change="handleDataSourceChange"
      >
      </l-select>
    </el-form-item>
    <el-form-item label="显示值">
      <l-select v-model="config.dataValueKey" placeholder="请选择值" size="mini" :options="myColNameList" filterable>
      </l-select>
    </el-form-item>
  </div>
</template>
<script>
export default {
  props: ["data"],
  data() {
    return {
      apiColumns: [
        { label: "数据名称", prop: "f_Name", minWidth: "110" },
        { label: "数据连接", prop: "f_Url", minWidth: "110" },
      ],
      apiNameList: [],
    };
  },
  computed: {
    config() {
      return this.data;
    },
    myColNameList() {
      if (this.data.mode == 0) {
        return this.apiNameList;
      } else {
        if (this.lr_dataSourceCol && this.config.dataCode) {
          const colNameList = this.lr_dataSourceCol[this.config.dataCode] || [];
          return colNameList.map((t) => {
            return { value: t, label: t };
          });
        } else {
          return [];
        }
      }
    },
  },
  created() {
    if (this.data.mode == 0) {
      if (this.config.apiResponseType) {
        this.loadDataSourceCol();
      }
    } else {
      if (this.config.dataCode) {
        this.lr_loadDataSourceColNames(this.config.dataCode);
      }
    }
  },
  methods: {
    handleDataTypeChange() {
      this.config.dataCode = "";
      this.config.apiCode = "";
    },
    handleDataSourceChange() {
      if (!this.$validatenull(this.config.dataCode)) {
        this.lr_loadDataSourceData(this.config.dataCode);
        this.lr_loadDataSourceColNames(this.config.dataCode);
      }
    },
    loadPageData(pageData) {
      return new Promise((resovle) => {
        this.lr_apiListData(pageData).then((res) => {
          resovle(res);
        });
      });
    },
    handleApiChange(row) {
      this.config.dataCode = row.f_Name;
      this.config.apiCode = row.f_Id;
      this.config.apiUrl = row.f_Url;
      this.config.apiResponseType = row.f_ResponseType;
      this.loadDataSourceCol();
    },
    loadDataSourceCol() {
      //解析接口的数据结构
      if (this.data.apiResponseType) {
        this.apiNameList = this.lr_turnPropertysInfo(JSON.parse(this.data.apiResponseType)).map((item) => ({
          label: item,
          value: item,
        }));
      }
    },
  },
};
</script>
